<script>
import upload from '@/components/upload.vue'
import { submitServiceInfo } from '@/api/publish'
export default {
    components: {
        upload
    },
    data() {
        return {
            tabIndex: 0,
            // 表单数据
            formData: {
                // 合同图片
                attachment: [],
                // 箱单图片
                packing: [],
                // 发票图片
                invoice: [],
                // cmr图片 
                cmr: [],
                // 货物图片
                image: [],

                // 是否缴纳关税 0不缴纳 1缴纳
                is_duties: '0',
                // 商品名称
                name: '',
                // 海关编码
                sn: '',
                // 商品数量
                number: '',
                // 商品价格
                price: '',
                // 备注
                content: '',
                // 请求用户id
                user_id: ''
            },
            uploadKeys: ['attachment', 'packing', 'invoice', 'cmr', 'image'],
            uploadLabels: [this.$t('合同'), this.$t('箱单'), this.$t('发票'), 'CMR', this.$t('货物图片')]
        }
    },
    created() {
        // this.formData = {
        //     "attachment": [
        //         "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20250219/d41d8cd98f00b204e9800998ecf8427e.docx"
        //     ],
        //     "packing": [
        //         "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20250219/d41d8cd98f00b204e9800998ecf8427e.docx"
        //     ],
        //     "invoice": [
        //         "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20250219/d41d8cd98f00b204e9800998ecf8427e.docx"
        //     ],
        //     "cmr": [
        //         "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20250219/6065bda2eddbcb798d0138fcd9a2d47e.doc"
        //     ],
        //     "image": [
        //         "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20250219/d41d8cd98f00b204e9800998ecf8427e.docx"
        //     ],
        //     "is_duties": "0",
        //     "name": "123123",
        //     "sn": "1",
        //     "number": "2",
        //     "price": "3",
        //     "content": "4",
        //     "user_id": ""
        // }
    },
    methods: {
        log(e) {
            console.log(e)
        },
        deleteFile(item, index) {
            uni.showModal({
                title: this.$t('提示'),
                content: '确定要删除该文件吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.formData[item].splice(index, 1)
                    }
                }
            })
        },
        async submit() {
            // 
            const formData = JSON.parse(JSON.stringify(this.formData))
            formData.user_id = uni.getStorageSync('user_id')
            this.uploadKeys.forEach(item => {
                formData[item] = formData[item].join(',')
            })

            if (["attachment", "packing", "invoice", "cmr", "image", "name", "sn", "number", "price", "content"].some(item => formData[item] != '')) {
                uni.showLoading({
                    title: '提交中'
                });
                const res = await submitServiceInfo(formData)
                uni.hideLoading()
                if (res.data.code == 200) {
                    this.$emit('confirm', res.data.data.data.id)
                }
                this.toast(res.data.message)
            } else {
                this.$emit('confirm')
            }

        }
    }
}
</script>
<template>
    <div class="bg-white rounded-26 p-20 mb-20 flex flex-col" style="height: 80vh;align-items: stretch;">
        <!-- <pre> -->
        <!-- {{ formData }} -->
        <!-- </pre> -->

        <div class="between rounded-20 overflow-hidden p-10 bg-gray-300 fz26 text-gray-500 flex-shrink-0">
            <div class="item center h-90 flex-1  rounded-20 font-bold text-gray-3d3d3d"
                :class="{ 'bg-white text-gray-3d3d3d': tabIndex == 0 }" @click="tabIndex = 0">{{$t('填写商品信息')}}</div>
            <div class="item center h-90 flex-1  rounded-20" :class="{ 'bg-white text-gray-3d3d3d': tabIndex == 1 }"
                @click="tabIndex = 1">{{$t('上传商品信息文件')}}</div>
        </div>

        <div class="flex-1 mt-20" style="overflow: auto;">
            <div v-if="tabIndex == 0">
                <div class="between mt-30">
                    <div class="fz30 mb-16 text-gray-555">{{$t('是否代缴纳关税')}}</div>
                    <div class="flex px-10 py-10 rounded-40 text-gray-500" style="border: 1px solid #ddd;">
                        <div class="fz30  px-30 rounded-30 py-10"
                            :class="{ 'bg-primary text-white': formData.is_duties === '1' }"
                            @click="formData.is_duties = '1'">{{$t('是')}}</div>
                        <div class="fz30  px-30 rounded-30 py-10"
                            :class="{ 'bg-primary text-white': formData.is_duties === '0' }"
                            @click="formData.is_duties = '0'">{{$t('否')}}</div>
                    </div>
                </div>
                <div class="flex-col mt-20">
                    <div class="fz30 mb-16 text-gray-555">{{$t('商品名称')}}</div>
                    <div>
                        <input type="text" class="w-full h-80 bg-gray-300 rounded-10 px-16 fz28" :placeholder="$t('请输入商品名称')"
                            v-model="formData.name">
                    </div>
                </div>
                <div class="flex-col mt-20">
                    <div class="fz30 mb-16 text-gray-555">{{$t('海关编码')}}</div>
                    <div>
                        <input type="text" class="w-full h-80 bg-gray-300 rounded-10 px-16 fz28" :placeholder="$t('请输入海关编码')"
                            v-model="formData.sn">
                    </div>
                </div>
                <div class="flex-col mt-20">
                    <div class="fz30 mb-16 text-gray-555">{{$t('商品数量')}}</div>
                    <div>
                        <input type="text" class="w-full h-80 bg-gray-300 rounded-10 px-16 fz28" :placeholder="$t('请输入商品数量')"
                            v-model="formData.number">
                    </div>
                </div>
                <div class="flex-col mt-20">
                    <div class="fz30 mb-16 text-gray-555">{{$t('商品价格')}}</div>
                    <div>
                        <input type="text" class="w-full h-80 bg-gray-300 rounded-10 px-16 fz28" :placeholder="$t('请输入商品价格')"
                            v-model="formData.price">
                    </div>
                </div>
                <div class="flex-col mt-20">
                    <div class="fz30 mb-16 text-gray-555">{{$t('备注')}}</div>
                    <textarea class="w-full h-200 bg-gray-300 rounded-10 p-16 fz28" :placeholder="$t('请输入备注')"
                        v-model="formData.content"></textarea>
                </div>
            </div>

            <div v-if="tabIndex == 1">
                <div v-for="(item, index) in uploadKeys" class="mb-30 p-20 rounded-20 mt-30"
                    style="border: 1px solid #ddd;">
                    <div class="between">
                        <div class="fz30 mb-16 text-gray-555"> {{ uploadLabels[index] }}{{$t('上传')}}</div>
                        <div>
                            <div style="position: relative;">
                                <div class="bg-primary text-white rounded-30 fz28 pl-30 pr-30 pt-10 pb-10 center"
                                    style="position: absolute;top: 0;right: 0;width: 200rpx;height: 60rpx;">
                                    {{$t('文件选择')}}
                                </div>
                                <upload @change="e => {
                                    formData[item].push(e.fullurl)
                                }" style="opacity: 0;" />
                            </div>
                        </div>
                    </div>
                    <div class="file-item mt-20 between bg-gray-300 p-10 rounded-10"
                        v-for="(fileItem, index) in formData[item]" :key="index">
                        <div class="flex" style="width: 85%;word-break: break-all;">
                            <u-icon name="file-text" size="40rpx" color="#278AFF"></u-icon>
                            <div class="fz28 ml-14 text-111">
                                {{ fileItem.split('/')[fileItem.split('/').length - 1] || $t('货物清单') }}
                            </div>
                        </div>
                        <image src="/static/icon/del.png" mode="widthFix" class="w-30 mr-20"
                            @click="deleteFile(item, index)"></image>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-primary rounded-50 p-20 fz30 text-white center flex-shrink-0 mt-20 h-100" @click="submit">
            {{$t('提交')}}
        </div>

    </div>
</template>

<style></style>